var stageTemplate = `
<div v-bind:style="{width: ratePraentW}" rateArray='rateArray'>
    <div v-on:click="rateChange" v-cloak v-for="rateObjec in rateArray" :class="[rateObjec.classVal,rateObjec.check]">
        <p><span class="stage_num">{{rateObjec.stage}}</span>期</p>
        <p>手续费:<span class="prime_rate">{{rateObjec.primeRate}}</span><span class="striking"><span class="number">{{rateObjec.saleRate}}</span>%/期</span></p>
        <p class="striking">还款:<span class="number">{{rateObjec.repayment}}</span>/每期</p>
        <div v-if="rateObjec.stageSale" class="stage_sale">{{rateObjec.stageSale}}折</div>
    </div>
</div>
`

function getStagediv(rateArray) {
    return {
        template: stageTemplate,
        data: function() {
            return {
                "rateArray": rateArray
            };
        },
        computed: {
            ratePraentW: function() {
                return (this.rateArray.length * 170 + 35) + "px";
            }
        },
        methods: {
            rateChange: function() {
                console.dir(event.currentTarget);
                var stageNum = $(event.currentTarget).find(".stage_num").text();
                console.log(stageNum);
                var newcheckedRateObject;
                for (var i = 0, l = this.rateArray.length; i < l; i++) {
                    if (this.rateArray[i].stage == stageNum) {
                        this.rateArray[i].check = "checked";
                        newcheckedRateObject = this.rateArray[i];
                    } else {
                        this.rateArray[i].check = "";
                    }
                }

                $.publish("rateChange",newcheckedRateObject);
            }
        }
    };
}

module.exports = {
    getStagediv: getStagediv
}